import MainContainerCustom from '@/components/MainContainerCustom';
import { View } from '@tarojs/components';
import { CFlexCustom, CBlockCustom } from '@vh-mobile/pro-components';
import './index.less';

export default function DemoFlex() {
  return (
    <MainContainerCustom>
      <View className="flex">
        <CBlockCustom title="基础用法" padding>
          <CFlexCustom justify="center" align="center">
            <CFlexCustom.Item span={8}>span: 8</CFlexCustom.Item>
            <CFlexCustom.Item span={8}>span: 8</CFlexCustom.Item>
            <CFlexCustom.Item span={8}>span: 8</CFlexCustom.Item>
          </CFlexCustom>
        </CBlockCustom>
        <CBlockCustom title="设置列元素间距" padding>
          <CFlexCustom justify="center" align="center">
            <CFlexCustom.Item span={7} offset={1}>
              span: 8
            </CFlexCustom.Item>
            <CFlexCustom.Item span={7} offset={1}>
              span: 8
            </CFlexCustom.Item>
            <CFlexCustom.Item span={7} offset={1}>
              span: 8
            </CFlexCustom.Item>
          </CFlexCustom>
        </CBlockCustom>
        <CBlockCustom title="对齐方式" padding>
          <CFlexCustom justify="start">
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>

          <CFlexCustom justify="end">
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>

          <CFlexCustom justify="center">
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>

          <CFlexCustom justify="space-between">
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>

          <CFlexCustom justify="space-around">
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>

          <CFlexCustom align="start" wrap="wrap" gutter={[20, 20]}>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
            <CFlexCustom.Item span={6}>span: 6</CFlexCustom.Item>
          </CFlexCustom>
        </CBlockCustom>
      </View>
    </MainContainerCustom>
  );
}
